<template>
	<view class="accept">
		<image :src="$IMG_URL('/static/tabbar/position.png')" mode="" class="bg"></image>
		<view class="card">
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">意向职位</text>
				</view>
				<u-input type="text" :value="query.position" :border="false" input-align="right" placeholder="请选择意向职位" class="input_cs" disabled
					@click="positionShow = true"  :clearable="false"/>
				<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icons"></image>
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">您的姓名</text>
				</view>
				<u-input v-model="query.title" type="text" input-align="right" placeholder="请填写您的姓名" :border="false" />
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">性别</text>
				</view>
				<u-input type="text" :value="findSex(sexparams, query.gender)" :border="false" input-align="right" placeholder="请选择性别" class="input_cs" disabled
					@click="sexShow = true"  :clearable="false"/>
				<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icons"></image>
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">年龄</text>
				</view>
				<u-input v-model="query.age" type="number" maxlength="3" input-align="right" placeholder="请填写年龄"
					:border="false" />
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">手机号码</text>
				</view>
				<u-input v-model="query.mobile" type="number" maxlength="11" input-align="right" placeholder="请填写手机号码"
					:border="false" />
			</view>
			
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">服务门店</text>
				</view>
				<u-input :value="findshopName(shop,query.shop_id_list)" type="text" :border="false" input-align="right"
					placeholder="请选择服务门店（可多选）" class="input_cs" :clearable="false" disabled @click.stop="openService" />
				<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icons"></image>
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">擅长领域</text>
				</view>
				<u-input :value="findDomainsByIdList(skilled,query.domain_id_list)" type="text" :border="false"
					input-align="right" placeholder="请选择擅长领域（可多选）" class="input_cs" :clearable="false" disabled
					@click.stop="openArea" />
				<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="icons"></image>
			</view>
			<view class="comlum_Y mb">
				<view class="left">
					<view class="star">
						*
					</view>
					<view class="size">
						行业经历
					</view>
				</view>
				<u-input type="textarea"  v-model="query.industry" :border="false" :height="230" :auto-height="false"
					:clearable="false" :custom-style="customStyle" placeholder="请填写过往做教练/管理的行业经历"  />
			</view>
			<view class="comlum_Y mb">
				<view class="left">
					<view class="star">
						*
					</view>
					<view class="size">
						个人证书
					</view>
				</view>
				<view class="photo">
					<image :src="$IMG_URL('/static/user/upload.png')" mode="" class="upload"
						v-if="query.certificate_image_list.length < 9" @click.stop="addcertificate"></image>
					<view v-for="(item,index) in query.certificate_image_list" :key="index" class="Item"
						v-if="query.certificate_image_list.length">
						<image :src="item" mode="" class="img" @click.stop="$PREVIEW_IMAGE(item)"></image>
						<image :src="$IMG_URL('/static/user/close.png')" mode="" class="close" @click.stop="closecertificate(item, index)">
						</image>
					</view>
					
				</view>
			</view>
			<view class="comlum_Y">
				<view class="left">
					<view class="star">
						*
					</view>
					<view class="size">
						教练风采
					</view>
				</view>
				<view class="photo">
					<image :src="$IMG_URL('/static/user/upload.png')" mode="" class="upload"
						v-if="query.personage_image_list.length < 9" @click.stop="addImage"></image>
					<view v-for="(item,index) in query.personage_image_list" :key="index" class="Item"
						v-if="query.personage_image_list.length">
						<image :src="item" mode="" class="img" @click.stop="$PREVIEW_IMAGE(item)"></image>
						<image :src="$IMG_URL('/static/user/close.png')" mode="" class="close" @click.stop="closeImgList(item, index)">
						</image>
					</view>
					
				</view>
			</view>
		</view>	
		<view class="empty">
			
		</view>
		<view class="foot">
			<view class="btn2"  @click="routeResult">
				提交申请
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-picker  v-model="sexShow" mode="selector" :range="sexparams" :customTimeTag="true" :title="'性别'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeSex"></u-picker>
		<u-picker  v-model="positionShow" mode="selector" :range="positionparms" :customTimeTag="true" :title="'意向职位'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changePosition"></u-picker>
		<popupVue :title="'选择服务门店'" @close="shopClose" @sure="shopSure" :couponShow="couponShow">
			<view class="comlum_Y2">
				<u-search placeholder="搜索门店" :show-action="false" shape="square" class="search-input" v-model="shopQuery.search" @change="getshop"></u-search>
				<scroll-view scroll-y="true" class="scroll-Y2">
					<view class="comlum_Y3">
						<view v-for="(item,index) in shop" :key="index" class="Item"
							@click="changeShopIndex(item, index)">
							<view class="the_left">
								<image :src="$IMG_URL('/static/home/Boutique.png')" mode="" class="icon"></image>
								<view class="name">
									{{item.shop_name}}
								</view>
							</view>
							<image
								:src="item.sure ?$IMG_URL('/static/member/agreement2.png'):$IMG_URL('/static/member/agreement1.png')"
								mode="" class="radio"></image>
						</view>
					</view>
					<view class="empty">
		
					</view>
				</scroll-view>
			</view>
		</popupVue>
		
		<popupVue :title="'选择擅长领域'" @close="skilledClose" @sure="skilledSure" :couponShow="skilledShow">
			<view class="comlum_Y2">
				<scroll-view scroll-y="true" class="scroll-Y3">
					<view class="comlum_Y4">
						<view v-for="(item,index) in skilled" :key="index" class="com_Item">
							<view class="title">
								{{item.title}}
							</view>
							<view class="row">
								<view v-for="(childItem,childIndex) in item.territory" :key="childIndex" class="field"
									:class="[(childIndex + 1) % 4 === 0 ? '' : 'mr',childItem.sure ?'Activefield':'field']"
									@click="changField(childItem,childIndex, index)">
									{{childItem.domain}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</popupVue>
	</view>
</template>

<script>
	import popupVue from '@/components/popup.vue'
	import {
		domain,
		shop,
		applyforLeague
	} from '@/api/apply.js'
	export default {
		components: {
			popupVue
		},
		data(){
			return{
				query:{
					title:'',
					mobile:'',
					gender:'',
					position:'',
					shop_id_list:[],
					domain_id_list:'',
					industry:'',
					age:'',
					certificate_image_list:[],
					personage_image_list:[],
				},
				sexparams:['女', '男'],
				positionparms:['健身教练','门店管理'],
				positionShow:false,
				sexShow: false,
				customStyle: {
					background: '#f6f6f6',
					padding: '32rpx',
					width:'300rpx'
				},
				shop: [],
				skilled: [],
				shopList:[],
				couponShow: false,
				skilledShow:false,
				shopQuery:{
					search:''
				}
			}
		},
		created() {
			this.getdomain()
			this.getshop()
		},
		methods:{
			routeResult(){
				applyforLeague(this.query).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							icon:false
						})
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon:false
						})
					}
				})
			},
			closecertificate(e){
				console.log('e', e);
				this.query.certificate_image_list.splice(e, 1)
			},
			closeImgList(e) {
				console.log('e', e);
				this.query.personage_image_list.splice(e, 1)
			},
			addcertificate(){
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						console.log('res', res);
						res.tempFilePaths.forEach(i=>{
							that.$UPLOADIMAGE(i, 'apply').then(imgUrl => {
								console.log('imgUrl', imgUrl);
								that.query.certificate_image_list.push(imgUrl)
								// that.$forceUpdate()
							})
						})
						
					},
				});
			},
			addImage() {
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: function(res) {
						console.log('res', res);
						res.tempFilePaths.forEach(i=>{
							that.$UPLOADIMAGE(i, 'apply').then(imgUrl => {
								console.log('imgUrl', imgUrl);
								that.query.personage_image_list.push(imgUrl)
								// that.$forceUpdate()
							})
						})
						
					},
				});
			},
			changField(childItem, childIndex, index) {
				this.$set(this.skilled[index].territory[childIndex], 'sure', !this.skilled[index].territory[childIndex]
					.sure);
			},
			findshopName(data, list) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (list.length) {
							if (list.includes(i.shop_id)) {
								// 如果在，将domain添加到结果数组中
								domains.push(i.shop_name);
							}
						}
					})
				}
				if (domains.length >= 2) {
					dName = domains[0] + '等' + domains.length + '家'
				} else {
					dName = domains.join(',')
				}
				// 返回结果数组
				return dName;
			},
			// 擅长领域回显
			findDomainsByIdList(data, list) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (i.territory.length) {
							i.territory.forEach(territory => {
								if (list) {
									if (list.includes(territory.domain_id)) {
										// 如果在，将domain添加到结果数组中
										domains.push(territory.domain);
									}
								}
							})
						}
			
					})
				}
				if (domains.length >= 3) {
					dName = domains[0] + '等' + domains.length + '个'
				} else {
					dName = domains.join(',')
				}
				// 返回结果数组
				return dName;
			},
			getshop() {
				shop(this.shopQuery).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.shop = res.data
					}
				})
			},
			getdomain() {
				domain().then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.skilled = res.data.list
					}
				})
			},
			shopSure() {
				this.query.shop_id_list = []
				this.shop.forEach((skill, index) => {
					if (skill.sure) {
						this.query.shop_id_list.push(skill.shop_id);
					}
				});
				console.log('this.query.shop_id_list', this.query.shop_id_list);
				this.couponShow = false
			},
			skilledSure() {
				this.query.domain_id_list = []
				// 遍历this.skilled数组（假设它是一个数组）
				this.skilled.forEach((skill, index) => {
					// 遍历每个skill的territory数组
					skill.territory.forEach((territory, childIndex) => {
						// 如果territory的sure属性为true
						if (territory.sure) {
							// 你可以直接将territory对象添加到sureData数组中
							// 或者你可以创建一个新的对象或只包含你需要的属性
							this.query.domain_id_list.push(territory
							.domain_id); // 或者 territory 的某个子集，如 { ...territory, index, childIndex }
						}
					});
				});
				this.skilledShow = false
			},
			skilledClose() {
				this.skilledShow = false
			},
			openArea() {
				this.skilledShow = true
			},
			shopClose() {
				this.couponShow = false
			},
			openService() {
				this.couponShow = true
			},
			changeShopIndex(item, index) {
				// this.shopIndex = index
				this.$set(this.shop[index], 'sure', !this.shop[index].sure);
			},
			// 擅长领域回显
			findDomainsByIdList(data, list) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (i.territory.length) {
							i.territory.forEach(territory => {
								if (list) {
									if (list.includes(territory.domain_id)) {
										// 如果在，将domain添加到结果数组中
										domains.push(territory.domain);
									}
								}
							})
						}
			
					})
				}
				if (domains.length >= 3) {
					dName = domains[0] + '等' + domains.length + '个'
				} else {
					dName = domains.join(',')
				}
				// 返回结果数组
				return dName;
			},
			findshopName(data, list) {
				const domains = [];
				var dName = ''
				if (data.length) {
					data.forEach(i => {
						if (list.length) {
							if (list.includes(i.shop_id)) {
								// 如果在，将domain添加到结果数组中
								domains.push(i.shop_name);
							}
						}
					})
				}
				if (domains.length >= 2) {
					dName = domains[0] + '等' + domains.length + '家'
				} else {
					dName = domains.join(',')
				}
				// 返回结果数组
				return dName;
			},
			// 性别
			findSex(list, data) {
				return list[data]
			},
			changeSex(e){
				console.log('e', e);
				this.query.gender = e[0]
			},
			changePosition(e){
				console.log('e', e);
				this.query.position = this.positionparms[e[0]]
			},
			sexSure() {
				this.sexShow = false
			},
			sexClose() {
				this.sexShow = false
			}
			// 性别
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}
	.empty{
		width: 750rpx;
		height: 200rpx;
	}
	.foot {
		z-index: 99;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 10rpx;
		.btn2 {
			width: 702rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.accept{
		display: flex;
		flex-direction: column;
		align-items: center;
		.bg {
			width: 750rpx;
			height: 274rpx;
		}
		
		.upload_img {
			width: 204rpx;
			height: 204rpx;
		}
		
		.photo {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
		}
		
		.upload {
			width: calc((100% - 24rpx) / 3);
			height: 204rpx;
			margin-right: 12rpx;
			/* 右边距 */
			margin-bottom: 12rpx;
		}
		
		.upload:last-child {
			margin-right: 0;
			/* 如果是最后一个元素，移除右边距 */
		}
		
		.Item:nth-child(3n) {
			margin-right: 0;
			/* 每行的第三个元素没有右边距 */
		}
		
		.Item {
			width: calc((100% - 24rpx) / 3);
			/* 每行三个元素，包括间距 */
			height: 204rpx;
			background: rgba(0, 0, 0, 0.00);
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			margin-right: 12rpx;
			/* 右边距 */
			margin-bottom: 12rpx;
		
			.close {
				position: absolute;
				right: 0;
				top: 0;
				width: 52rpx;
				height: 52rpx;
			}
		
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.comlum_Y {
			display: flex;
			flex-direction: column;
			width: 622rpx;
		
		}
		
		.left {
			display: flex;
			flex-direction: row;
			flex: 1;
			margin-bottom: 24rpx;
		
			.star {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #f37364;
			}
		
			.size {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}
		}
		.card {
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: -32rpx;
			z-index: 99;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
		
			.mb {
				margin-bottom: 48rpx;
			}
		
			.required-box2{
				width: 100%;
				display: flex;
				flex-direction: row;
				.left_title {
					flex: 1;
						
					.required-tag {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #f37364;
					}
						
					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
					}
				}
				.right{
					display: flex;
					flex-direction: row;
					align-items: center;
				}
			}
			.required-box {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
		
				.left_title {
					flex: 1;
		
					.required-tag {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #f37364;
					}
		
					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
					}
				}
		
				.indicate {
					width: 10rpx;
					height: 16rpx;
					margin-left: 8rpx;
				}
				
				.icons{
					width: 10rpx;
					height: 16rpx;
					margin-left: 8rpx;
				}
			}
		}	
		
		.comlum_Y2 {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		
			.search-input {
				width: 702rpx;
				height: 66rpx;
			}
		
			.scroll-Y2 {
				width: 100%;
				height: 58vh;
		
				.comlum_Y3 {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 24rpx;
		
					.Item {
						width: 702rpx;
						height: 88rpx;
						background: #f6f6f6;
						border-radius: 16rpx;
						padding: 0 24rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 24rpx;
		
						.the_left {
							flex: 1;
							display: flex;
							flex-direction: row;
							align-items: center;
		
							.icon {
								width: 106rpx;
								height: 32rpx;
								margin-right: 12rpx;
							}
		
							.name {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #333333;
							}
						}
		
						.radio {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
		
				.empty {
					height: 110rpx;
					width: 100%;
				}
			}
		
			.scroll-Y3 {
				width: 100%;
				height: 60vh;
		
				.comlum_Y4 {
					width: 100%;
					display: flex;
					flex-direction: column;
					padding: 0 40rpx;
		
					.com_Item {
						display: flex;
						flex-direction: column;
						margin-bottom: 48rpx;
						width: 100%;
		
						.title {
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
							margin-bottom: 32rpx;
						}
		
						.row {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							width: 100%;
		
							.mr {
								margin-right: 10rpx;
							}
		
							.field {
								padding: 0 24rpx;
								height: 72rpx;
								background: #f6f6f6;
								border-radius: 16rpx;
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								color: #333333;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 10rpx;
								border: 2rpx solid #f6f6f6;
							}
		
							.Activefield {
								padding: 0 24rpx;
								height: 72rpx;
								background: rgba(129, 202, 197, 0.10);
								border: 2rpx solid #73F0EA;
								border-radius: 16rpx;
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								color: #73F0EA;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>